<template>
  <div ref="myLine"></div>
</template>
<script>
let echarts = require('echarts/lib/echarts');
  export default {
    name: 'myBarChart',
    props: ['chartData'],
    data () {
      return {

      }
    },
    created () {
      
    },
    mounted() {
      this.drawLine()
    },
    methods: {
      drawLine() {
        var _this=this;
        let dom= this.$refs.myLine;
        let myLine = echarts.init(dom);
        //console.log('chartData',this.chartData);
        var yAxisData1=[];
        var yAxisData2=[];
        var yAxisData3=[];
        var xAxisData=[];
        if(this.chartData.length>0){
          this.chartData.forEach(function(i){
            yAxisData1.push(i.run_rate);
            yAxisData2.push(i.open_rate);
            yAxisData3.push(i.Alloutput);
            xAxisData.push(i.mon+'月');
          })
        }
        // 绘制图表
        myLine.setOption({
          textStyle: {
            color:'#fff',
          },
          title: {
            text: '2019年度生产分析',//_this.title
            x:'center',
            subtext:'',//_this.subtitle
            textStyle: {
              color: '#fff',
              fontSize:24,
              fontWeight: 'normal',
            },
            top: '20px',
            subtextStyle: {
              color: '#a0a0a0',
              fontSize: 15,
            },
          },
          legend: {
            data:['产量','月平均利用率','月平均开机率'],
            show:true,
            top:'60px',
            textStyle: {
              color: '#fff',
            },
          },
          grid: {
            left: '5%',right: '8%',bottom:'30px',top:'90px',
          },
          tooltip: {},
          xAxis: {
            type: 'category',
            //interval:100,
            data: xAxisData,//["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
            //name: '产量',
            //boundaryGap: false,
            nameLocation: 'end',
            axisLine: {
              show:true,
              lineStyle: {
                color: '#0068b7',
                width: 3,
              },
            },
            axisTick: {show:false,},
            splitLine: {
              show: false,
              interval: 'auto',
              lineStyle: {
                color: ["#0f5070"],
                type: 'dashed',
              },
            },
            axisLabel: {
              //align:'left',
            },
          },
          yAxis: [
            {
              type: 'value',
              name: '百分比%',
              nameLocation: 'end',
              min: 0,
              max: 100,
              interval: 5,
              nameTextStyle: {
                color: '#00ffff',
              },
              axisLine: {
                show: true,
                lineStyle: {
                  color: '#0068b7',
                  width: 3,
                },
                symbol: ['none', 'arrow'],
              },
              axisTick: {show:false,},
              splitLine: {
                show: true,
                interval: 'auto',
                lineStyle: {
                  color: ["#345871"],
                  type: 'solid',
                },
              },
              axisLabel: {
                formatter: '{value}'
              }
            },
            {
              type: 'value',
              name: '产量/KG',
              nameTextStyle: {
                color: '#00ffff',
              },
              nameLocation: 'end',
              axisLine: {
                show: true,
                lineStyle: {
                  color: '#0068b7',
                  width: 3,
                },
                symbol: ['none', 'arrow'],
              },
              axisTick: {show:false,},
              splitLine: {
                show: false,
                interval: 'auto',
                lineStyle: {
                  color: ["#629fc2"],
                  type: 'dashed',
                },
              },
              axisLabel: {
                formatter: '{value}'
              }
            },
          ],
          series: [
            {
              name:'月平均利用率',
              type:'line',
              //yAxisIndex: 1,
              itemStyle: {
                color:'#f25276',
              },
              data: yAxisData1,//xAxisData[2.0, 4.9, 7.0, 3.2, 5.6, 6.7, 3.6, 2.2, 2.6, 2.0, 6.4, 3.3],
            },
            {
              name:'月平均开机率',
              type:'line',
              //yAxisIndex: 1,
              itemStyle: {
                color:'#5299e7',
              },
              data:yAxisData2,//[2.6, 5.9, 9.0, 6.4, 8.7, 7.7, 5.6, 1.2, 8.7, 8.8, 6.0, 2.3]xAxisData,
              symbol:'rect',
            },
            {
              name: '产量',
              type: 'bar',
              yAxisIndex: 1,
              min: 0,
              max:200000,
              interval:10000,
              data: yAxisData3,//[20000, 42000, 33000, 45000, 63000, 102000, 83000, 94000, 130000, 165000, 120000, 62000]xAxisData,
              itemStyle: {
                color: new echarts.graphic.LinearGradient(
                    0, 0, 0, 1,
                    [
                      {offset: 0, color: '#fde8c9'},
                      {offset: 0.5, color: '#fcdcac'},
                      {offset: 1, color: '#f7b249'}
                    ]
                ),
              },
              barWidth:20,
              label: {
                show:false,
                position: 'top',
                color: '#fff',
              },
            },
          ]
        });
      },
    }
  }
</script>
<style scoped>
</style>
